<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工信息</title>
<link rel="stylesheet" href="../libs/layui/css/layui.css">
<script type="text/javascript" src="../libs/layui/layui.js"></script>
</head>
<body>

<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
  <div class="layui-form-item layui-inline">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="key" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
 <div class="layui-form-item layui-inline">
	    <label class="layui-form-label">性别</label>
	    <div class="layui-input-block">
	      <select name="sex" lay-verify="required" id="selectbysex">
	      </select>
	    </div>
  </div>
  <div class="layui-form-item layui-inline">
	    <label class="layui-form-label">部门</label>
	    <div class="layui-input-block">
	      <select name="dep" lay-verify="required" id="selectbydep">
	      </select>
	    </div>
  </div>
    <div class="layui-form-item layui-inline">
    <label class="layui-form-label">生日</label>
    <div class="layui-input-block">
      <input type="text" name="bir" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<table id="demo" lay-filter="test"></table>
<script>
layui.use(['table','form'], function(){
  var table = layui.table;
  var form = layui.form;
  var $= layui.$;
  //第一个实例
  table.render({
	 id:'mybatis'
    ,elem:'#demo'
    ,height: 520
    ,toolbar: '#toolbarDemo'
    ,url: '../empServlet' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
	  {field: 'id', title: 'ID', width:80,fixed: 'left'}
	  ,{field: 'name', title: '姓名', width:100}
	  ,{field: 'sex', title: '性别', width:100}
	  ,{field: 'birthday', title: '生日', width:120}
      ,{field: 'dptName',title: '部门', width:120,templet:'<div>{{d.department.dptName}}</div>'}
      ,{field: 'dptDesc',title: '职务', width:120,templet:'<div>{{d.department.dptDesc}}</div>'}
      ,{title: '操作',fixed: 'right', width:200, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  //部门下拉菜单
  $(function(){
	  $.ajax({
			url:"../departmentServlet",
			type:"get",
			data:{}
			,
			success:function(res){
				var $select = $("#selectbydep");
				$select.append("<option value='所有部门'>"+"所有部门"+"</option>");
				for(var i=0;i<res.data.length;i++){
					$select.append("<option value='"+res.data[i].dptName+"'>"+res.data[i].dptName+"</option>");
				}
				form.render('select');
			}
		});
	  
  })
  
  //性别下拉菜单
  $(function(){
	  $.ajax({
			type:"get",
			data:{}
			,
			success:function(res){
				var $select = $("#selectbysex");
				$select.append("<option value='所有性别'>"+"所有性别"+"</option>");
				$select.append("<option value='男'>"+"男"+"</option>");
				$select.append("<option value='女'>"+"女"+"</option>");
				form.render('select');
			}
		});
	  
  })
  
  //提交监听事件
  form.on('submit(*)', function(data){
	  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
	  table.reload('mybatis',{
		 where:data.field
		 ,page: {
		   curr: 1 //重新从第 1 页开始
			    }
	  });
	  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
  
  
  
  
  
  
  
  table.on('toolbar(test)', function(obj){
	  var checkStatus = table.checkStatus(obj.config.id);
	  switch(obj.event){
	    case 'add':
	      layer.open({
	    	  type: 2, 
	    	  shade: [0.8, '#393D49'],
	    	  title: ['添加', 'font-size:18px;'],
	    	  area:['800px','280px'],
	    	  cancel: function(index, layero){ 		 
	  		    layer.close(index);
	  		 	table.reload('mybatis');
	  		  return false; 
	  		},
	    	  content: 'addEmployee.html' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
	    	}); 
	    break;
	  };
	});
  
  
  
  
  
  
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
	 
	  if(layEvent === 'detail'){ //查看
	    //do somehing 
	  	  
	  	  
	  	  
	  } else if(layEvent === 'del'){ //删除
	    layer.confirm('真的删除行么', function(index){
	      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	      layer.close(index);
	      //向服务端发送删除指令
	      $.ajax({
			  url:'../delEmployee',
			  type:'post',
			  data:{"id":data.id},
			  success:function(res){
				  if(res.code>0){
					  layer.msg("删除成功");
				  }
				  else{
					  layer.msg("删除失败");
				  }
			  }
		  });
		  return false; 
	    });
	  } else if(layEvent === 'edit'){ //编辑
	    //do something
	    layer.open({
	    	type: 2, 
	       shade: [0.8, '#393D49'],
	       title: ['编辑', 'font-size:18px;'],
	  	 content: 'updateEmployee.html',
	  	    area: ['800px', '280px'],
	  	  success: function(layero, index){
	  		 
	  	    var body = layer.getChildFrame('body', index);
		    console.log(body.html()); //得到iframe页的body内容
	  	    body.find('#name').val(data.name);
	  	  	body.find('#birthday').val(data.birthday);
	  	    body.find('#id').val(data.id);	  
	  	  } ,
	  	cancel: function(index, layero){ 
	  	       layer.close(index);
	  	       table.reload('mybatis');
	  	       return false; 
	  	}    

	    	
	    	
	    });
	    //同步更新缓存对应的值
	    obj.update({
	      username: '123'
	      ,title: 'xxx'
	    });
	  } else if(layEvent === 'LAYTABLE_TIPS'){
	    layer.alert('Hi，头部工具栏扩展的右侧图标。');
	  }
	});



  
  
  
});
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  </div>
</script>





</body>
</html>